<template>
	<view class="progress acea-row row-column">
		<view class="bar acea-row row-between" :style="{'height':height+'rpx','border-radius': height+'rpx'}">
			<view :class="['dot',(index+1)<=type?'bg-color':'']" v-for="(item,index) in statusList" 
			:style="{'height':height+'rpx','width': height+'rpx','left': index/(statusList.length-1)*100+'%','transform':index!=0?'translateX(-'+height/2+'px)':''}">
			</view>
			<view class="now" :style="{'width':nowWidth+'%','height':height+'rpx','border-radius': height+'rpx'}">
			</view>
		</view>
		<view class="textwrap acea-row row-between">
			<text v-for="(item,index) in statusList" :class="['text',type>=index?'col_4':'']" >{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'navTab',
		props: {
			//进度条高度
			height: {
				type: [Number, String],
				default: 12
			},
			// 进度总长
			types: {
				type: [Number, String],
				default: 4
			},
			//状态集合
			statusList: {
				type: Array,
				default: [{
						name: '下单',
						value: 0
					},
					{
						name: '待确认收货',
						value: 2
					},
					{
						name: '待提现',
						value: 4
					}
				]
			},
			//进度值
			type: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				nowWidth: (this.type / this.types) * 100
			}
		},
		created() {

		},
		methods: {}


	}
</script>

<style lang="scss" scoped>
	.col_1 {
		color: #FFEBEC;
	}

	.col_2 {
		color: #FFC2C5;
	}

	.col_3 {
		color: #EE212D
	}
	.col_4 {
		color: #A6A6A6
	}
    .bg-color {
		background-color: #fff!important;
		transform: translateX();
	}
	
	.progress {
		color: #333;

		.bar {
			position: relative;
			width: 100%;
			background-color: #FFEBEC;

			.dot {
				position: absolute;
				z-index: 2;
				border-radius: 50%;
				background-color: #FFC2C5;
			}

			.now {
				position: absolute;
				left: 0;
				top: 0;
				bottom:0;
				z-index: 1;
				background-color: #EE212D;
			}
		}

		.textwrap {
			margin-top: 10rpx;
			font-size: 22rpx;
			width: 100%;
		}
	}
</style>
